<template>
	<view>
		<view class="usertitle" v-if="Blog != null">
			<img class="usertitleimg" :src="Blog.icon" alt="">
			<view>{{Blog.name}}</view>
			<button v-if="isfollow == false" @click="follow()">关注</button>
			<button v-if="isfollow == true" @click="follow()">已关注</button>
			<view style="clear: both;"></view>
		</view>
		
		<image v-if="Blog != null" class="BlogContentImage" :src="Blog.images" ></image>
		
		<p v-if="Blog != null" class="NowBlogTitle">{{Blog.title}}</p>
		
		<p v-if="Blog != null" class="NowBlogContent">{{Blog.content}}</p>

		<view class="Good" @click="toGood()" v-if="Blog != null">
			<image class="goodImageRecomodity" :src="Blog.goodsIcon" ></image>
			<p style="float: left;padding: 0px;height: 10vw;margin-top: 4vw;display: block;width: 60vw;margin-left: 5vw;margin-top: 5vh;">{{Blog.goodsName}}<br>{{sold}}人购买了</p>
		</view>
		<view style="clear: both;height: 5vh;"></view>
		
		
		<input class="SendComment" type="text" placeholder="发表评论吧" v-model="mycomment">
		<button class="SendMyComment" @click="sendComment()">发表</button>
		
		<view style="clear: both;"></view>
		
		<view v-for="item in commentscontent">
			<view class="comments" v-if="item.parentId == '0'">
				<img class="commentsimg" :src="item.icon"  alt="">
				<p class="commentsp">{{item.content}}</p>
				<img v-if="item.isLike == true" class="commentsinliked" src="/imgs/61.png" alt="" @click="liked(item)">
				<img v-if="item.isLike == false" class="commentsinliked" src="/imgs/6.png" alt="" @click="liked(item)">
				<view style="clear: both;"></view>
				
				<view v-for="itemin in commentscontent">
					<view class="commentsin" v-if="itemin.parentId == item.id">
						<img class="commentsinimg" :src="itemin.icon"  alt="">
						<p class="commentsinp">{{item.content}}</p>
						<img v-if="itemin.isLike == true" class="commentsinliked" src="/imgs/61.png" alt="" @click="liked(itemin)">
						<img v-if="itemin.isLike == false" class="commentsinliked" src="/imgs/6.png" alt="" @click="liked(itemin)">
						<view style="clear: both;"></view>
					</view>
				</view>
				
			</view>
			<view style="clear: both;"></view>
		</view>
	</view>
</template>

<script>
	var Good = null
	var sold = null
	var Blog = null
	var commentscontent = null
	var isfollow = false
	
	export default{
		name:'BlogContent',
		data(){
			return{
				Good:Good,
				Blog:Blog,
				sold:sold,
				isfollow:isfollow,
				commentscontent:commentscontent,
				mycomment:""
			}
		},
		onLoad:function(){
			
			uni.request({
				url: "http://" + getApp().globalData.IpAddr + "/goods/" + getApp().globalData.goodsId,
				method:"GET",
				header:{	'authorization':getApp().globalData.token	},
				success:res=> {
					if(!res.data.success) wx.showToast({	title: '请求发送失败',	duration: 2000	})
					else{
						getApp().globalData.NowGood = res.data.data
						this.Good = getApp().globalData.NowGood
						this.sold = this.Good.sold
					}
				}
			})
			// console.log("http://" + getApp().globalData.IpAddr + "/blog-comments/" + getApp().globalData.NowBlogId)
			uni.request({
				url:"http://" + getApp().globalData.IpAddr + "/blog-comments/" + getApp().globalData.NowBlogId,
				method:"GET",
				header:{	'authorization':getApp().globalData.token	},
				success:res=>{
					// console.log(res)
					if(!res.data.success) wx.showToast({	title: '评论获取失败',	duration: 2000	})
					else{
						getApp().globalData.cache = res.data.data
						this.commentscontent = getApp().globalData.cache
					}
				}
			})
			
			uni.request({
				url:"http://" + getApp().globalData.IpAddr + "/blog/" + getApp().globalData.NowBlogId,
				method:"GET",
				header:{	'authorization':getApp().globalData.token	},
				success:res=>{
					if(!res.data.success) wx.showToast({	title: '博客信息获取失败',	duration: 2000	})
					else{
						getApp().globalData.cache = res.data.data
						// console.log(res)
						this.Blog = getApp().globalData.cache
						uni.request({
							url:"http://" + getApp().globalData.IpAddr + "/follow/or/not/" + this.Blog.userId,
							method:"GET",
							header:{	'authorization':getApp().globalData.token	},
							success:res=>{
								// console.log(res)
								if(!res.data.success) wx.showToast({	title: '博客信息获取失败',	duration: 2000	})
								else{
									getApp().globalData.cache = res.data.data
									// console.log(res)
									this.isfollow = getApp().globalData.cache
									// console.log(getApp().globalData.cache)
								}
							}
						})
					}
				}
			})
		},
		methods:{
			toGood(){
				uni.navigateTo({	url: "/pages/ext/commodity"	})
			},
			liked(item){
				uni.request({
					url:"http://" + getApp().globalData.IpAddr + "/blog-comments/commentliked/" + item.id,
					method:"PUT",
					header:{	'authorization':getApp().globalData.token	},
					success:res=> {
						if(res.data.success) {
							if(item.isLike == false){
								wx.showToast({	title: '点赞成功',	duration: 1000	})
								item.liked = item.liked + 1
							}else{
								wx.showToast({	title: '取消点赞成功',	duration: 1000	})
								item.liked = item.liked - 1
							}
							item.isLike = !item.isLike
						}
						else wx.showToast({	title: '点赞失败',	duration: 2000	})
					}
				})
			},
			follow(){
				// console.log("http://" + getApp().globalData.IpAddr + "/follow/" + this.Blog.userId + "/" + this.isfollow)
				uni.request({
					url:"http://" + getApp().globalData.IpAddr + "/follow/" + this.Blog.userId + "/" + !this.isfollow,
					method:"PUT",
					header:{	'authorization':getApp().globalData.token	},
					success:res=>{
						// console.log(res)
						if(!res.data.success) wx.showToast({	title: '发送请求失败',	duration: 2000	})
						else{
							if(this.isfollow == true) wx.showToast({	title: '取关成功',	duration: 2000	})
							else wx.showToast({	title: '关注成功',	duration: 2000	})
							this.isfollow = !this.isfollow
						}
					}
				})
			},
			sendComment(){
				uni.request({
					url:"http://" + getApp().globalData.IpAddr + "/blog-comments/" + this.Blog.id + "?comments=" + this.mycomment,
					method:"POST",
					header:{	'authorization':getApp().globalData.token	},
					success:res=>{
						// console.log(res)
						if(!res.data.success) wx.showToast({	title: '评论失败',	duration: 2000	})
						else{
							wx.showToast({	title: '评论成功',	duration: 2000	})
							// uni.navigateTo({	url:"/pages/ext/BlogContent"	})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.commentsinliked{
		width: 20px;
		height: 20px;
		float: left;
		margin-left: 40px;
		margin-top: 10px;
	}
	.SendComment{
		background-color: red;
		display: block;
		border :1px solid #e6e6e6;
		border-radius: 20px;
		background-color: #ffffff;
		width: 60vw;
		margin-left: 10vw;
		padding: 5px;
		padding-left: 5vw;
		float: left;
	}
	.SendMyComment{
		width: 10vw;
		padding: 0px;
		margin-left: 5vw;
		float: left;
		font-size: 3vw;
		border-radius: 15px;
		background-color: #ff8080;
		float: left;
	}
	.comments{
		height: 50px;
		/* background-color: red; */
	}
	.commentsimg{
		width: 30px;
		height: 40px;
		margin-left: 30px;
		margin-top: 10px;
		/* background-color: #ff5e5e; */
		float: left;
	}
	.commentsp{
		display: block;
		float: left;
		margin-left: 10px;
		height: 10px;
		margin-top: 10px;
	}
	.commentsin{
		/* background-color: #1100ff; */
	}
	.commentsinimg{
		display: block;
		width: 30px;
		height: 30px;
		margin-left: 70px;
		float: left;
	}
	.commentsinp{
		display: block;
		float: left;
		margin-top: 5px;
		margin-left: 10px;
	}
	.comments::after{
		clear: both;
	}
	.usertitle{
		padding-right: 0px;
		padding-left: 10px;
		background-color: white;
		display: flex;
		position: fixed;
		z-index: 999;
		height: 50px;
		width: 100vw;
	}
	.usertitleimg{
		float: left;
		display: block;
		margin-top: 5px;
		width: 40px;
		height: 40px;
	}
	.usertitle button{
		background-color: #ff5e5e;
		float: right;
		width: max-content;
		height: 30px;
		font-size: 10px;
		margin-right: 20px;
		margin-top: 8px;
	}
	.usertitle view{
		float: left;
		margin-top: 8px;
		margin-left: 10px;
	}
	.usertitle button::after{
		/* border: none; */
		clear: both;
	}
	.BlogContentImage{
		width: 100vw;
		height: 100vw;
	}
	.NowBlogTitle{
		display: block;
		text-align: center;
		margin: 5vw auto;
	}
	.NowBlogUserIcon{
		width: 20vw;
		height: 20vw;
		float: left;
	}
	.NowBlogContent{
		display: block;
		text-align: left;
		margin-left: 5vw;
		width: 80vw;
		word-wrap: break-word;
	}
	.GoodImage{
		width: 20vw;
		height: 20vw;
	}
	.goodImageRecomodity{
		width: 20vw;
		margin-left: 10vw;
		margin-top: 5vh;
		height: 20vw;
		float: left;
	}
</style>